<script>
import {
  getLoginFn,
  getOneByUsername,
  getworkstations,
} from "@/api/modules/login";
import { Toast } from "vant";

export default {
  data() {
    return {
      params: {
        username: "",
        password: "",
        parkCode: "",
        parkCodeText: "",
      },
      showPicker: false,
      loading: false,
      columns: [{ text: "演示停车场", value: "LC5101000004" }],
    };
  },
  methods: {
    onConfirm(selectedOptions) {
      this.params.parkCodeText = selectedOptions.text;
      this.params.parkCode = selectedOptions.value;
      this.showPicker = false;
    },
    async userFocus() {
      if (!this.params.username) {
        return;
      }
      const { code, data } = await getOneByUsername({
        username: this.params.username,
      });
      if (code === 200 && data) {
        this.params.parkCode = data.parkCode;
      }
    },
    async onSubmit() {
      this.loading = true;
      const { code, data } = await getLoginFn({
        ...this.params,
      });
      this.loading = false;
      this.$store.commit("setUserInfo", {
        ...data,
      });
      const data1 = await getworkstations({
        tollmanId: data.id,
        parkCode: data.parkCode,
      });
      if (code === 200) {
        this.$store.commit("setUserInfo", {
          ...data,
          workstationId: data1.data.workstationList[0].workStations[0].id,
          workStationName:
            data1.data.workstationList[0].workStations[0].workStationName,
        });
        // 登陆 mqtt 启动
        this.$store.dispatch("MQTT_CONNECT");
        setTimeout(() => {
          this.$store.dispatch(
            "MQTT_NEW_TOPIC",
            "mqtt/parking_event/inout" + "/" + data.parkCode
          );
        }, 2000);
        this.$router.push("/home");
      }
    },
  },
};
</script>
<template>
  <div class="login">
    <div
      class="flex-center"
      style="flex-direction: column; justify-content: flex-start"
    >
      <div style="height: 100px"></div>
      <div style="height: 30px"></div>
      <div class="login-content">
        <div class="title">路边停车收费管理系统</div>
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              :border="true"
              v-model="params.username"
              name="用户名"
              label="用户名"
              @blur="userFocus"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="params.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="params.parkCode"
              v-show="false"
              is-link
              readonly
              name="picker"
              label="停车场"
              placeholder="没有分配停车场"
              :rules="[{ required: true, message: '没有分配停车场' }]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button
              :loading="loading"
              round
              block
              type="primary"
              native-type="submit"
            >
              登录
            </van-button>
          </div>
        </van-form>
      </div>
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  background: url("@/assets/img/login/login-bg.png") no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: center;

  .login-content {
    width: 325px;
    box-shadow: 0 10px 30px 0 rgba(6, 198, 138, 0.2);
    border-radius: 24px 0 24px 0;
    min-height: 300px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .title {
      color: var(--theme-color);
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
}
</style>
